<template>
  <Dialog
    title="添加用户"
    :has-footer="false"
    width="1000px"
    @open="handleDialogOpen"
    @close="handleDialogClose"
  >
    <div style="margin-bottom: 20px">
      <el-input
        placeholder="请输入内容"
        v-model="filter"
        style="width: 220px"
      >
        <template #append>
          <el-button
            icon="Search"
            @click="handleSearch"
          />
        </template>
      </el-input>
    </div>
    <AppTable
      :data="users"
      :columns="columns"
      border
      max-height="500px"
    />
    <Pagination
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :total="paginationData.total"
      :load-list="getUnAddUsers"
    />
  </Dialog>
</template>

<script setup lang="tsx">
import Dialog from '@/components/Dialog/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import Pagination from '@/components/Pagination/index.vue'
import { addUserToDepartment, getUnAddedUsers } from '@/http/department'
import { reactive, ref } from 'vue'
import type { IDepartmentUser } from '@/http/types/department'
import { IButtonConfig } from '@/components/AppButtonGroup/type'

const buttonConfig:IButtonConfig[] = [
  {
    name: '选择',
    eventName: 'handleConfirm',
    type: 'primary'
  }
]
const columns = ref([
  { label: '登录名', prop: 'userName' },
  { label: '姓名', prop: 'name' },
  { label: '邮箱地址', prop: 'email' },
  { label: '手机号', prop: 'phoneNumber' },
  // { label: '创建时间', prop: 'creationTime', formatter: (row:IDepartmentUser) => parseDate2Str(row.creationTime) },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }:{row:IDepartmentUser}) => {
      return <AppButtonGroup
        rowData={row}
        buttonConfigs={ buttonConfig }
        onEvent={(eventName:string) => {
          eventName === 'handleConfirm' && handleConfirm(row)
        }}
      >
      </AppButtonGroup>
    }
  }
])

const props = defineProps({
  ouId: {
    type: String,
    default: ''
  }
})
interface EmitsType {
  (e: 'success'): void
}
const emit = defineEmits<EmitsType>()

const filter = ref('')

const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
const users = ref<IDepartmentUser[]>([])

const handleConfirm = async (row:IDepartmentUser) => {
  selected.value = [row]
  for (const i of selected.value) {
    await addUser(i.id, props.ouId)
  }
  emit('success')
}
const handleDialogOpen = async () => {
  await getUnAddUsers()
}
const handleDialogClose = () => {
  filter.value = ''
}

const selected = ref<IDepartmentUser[]>([])

const getUnAddUsers = async () => {
  const res = await getUnAddedUsers(
    paginationData.currentPage,
    paginationData.pageSize,
    {
      ouId: props.ouId,
      filter: filter.value
    }
  )
  users.value = res.items
  paginationData.total = res.totalCount
}

const handleSearch = () => {
  paginationData.currentPage = 1
  getUnAddUsers()
}

const addUser = async (userId:string, ouId:string) => {
  await addUserToDepartment(userId, ouId)
}
</script>

<style scoped lang="scss">

</style>
